import React from "react";
import {ActionType, ProColumns, ProTable} from "@ant-design/pro-components";
import {Button, message, Popconfirm, Tag} from "antd";
import {addUser, deleteUserById, pageUser, updateUserById} from "@/pages/system/user/api";
import UserEditModel from "@/pages/system/user/components/UserEditModel";

const UserManager: React.FC = () => {
  const actionRef = React.useRef<ActionType>();

  const columns: ProColumns<API.CurrentUser>[] = [
    {
      title: '用户名',
      dataIndex: 'username',
      ellipsis: true,
      tooltip: '用户名',
      key: 'username',
      width: 120,
      align: 'center',
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      ellipsis: true,
      tooltip: '昵称',
      key: 'contactName',
      align: 'center',
    },
    {
      title: '用户类型',
      dataIndex: 'type',
      ellipsis: true,
      key: 'type',
      hideInSearch: false,
      valueType: 'select',
      width: 80,
      valueEnum: {
        '1': '管理员',
        '2': '教练',
        '3': '学员',
      },
      render: (_, record) => {
        const typeMap = {
          '1': <Tag color="lime">管理员</Tag>,
          '2': <Tag color="green">教练</Tag>,
          '3': <Tag color="orange">学员</Tag>,
        }
        return typeMap[record.type as keyof typeof typeMap] || '未知类型'
      },
    },
    {
      title: '拼音简码',
      dataIndex: 'simplifiedCode',
      ellipsis: true,
      key: 'simplifiedCode',
      width: 80,
      align: 'center',
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      ellipsis: true,
      key: 'phone',
      width: 120,
      align: 'center',
    },
    {
      title: '公司',
      dataIndex: 'companyName',
      ellipsis: true,
      key: 'companyName',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'status',
      ellipsis: true,
      key: 'status',
      valueType: 'select',
      width: 80,
      align: 'center',
      valueEnum: {
        "0": {
          text: '正常',
          status: 'Success',
        },
        "1": {
          text: '停用',
          status: 'Error',
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <UserEditModel
          isAdd={false}
          user={record}
          key={`update`}
          onSubmit={async (values) => {
            values.id = record.id
            const {data} = await updateUserById(values)
            if (data) {
              actionRef.current?.reload()
              message.success('修改成功')
            }
            return data
          }}
          triggerButton={<Button type={'link'} size={"small"}>修改</Button>}
        />,
        <Popconfirm
          key={'delete'}
          title={`确认删除`}
          description={`确认删除【${record.contactName}】用户吗？`}
          okText="确认"
          cancelText="取消"
          onConfirm={async () => {
            const {data} = await deleteUserById(record.id)
            if (data) {
              actionRef.current?.reload()
              message.success('删除成功')
            }
          }}
        >
          <Button type={'link'} size={"small"}>删除</Button>
        </Popconfirm>,
        <Button
          key={'status'}
          type={'link'} size={"small"} onClick={async () => {
          const {data} = await updateUserById({
            id: record.id,
            status: record.status === '0' ? '1' : '0'
          } as API.CurrentUser)
          if (data) {
            actionRef.current?.reload()
            message.success('修改成功')
          }
        }}>
          {record.status === '0' ? '封禁' : '启用'}
        </Button>,
      ],
    },
  ]

  return (
    <ProTable<API.CurrentUser, API.PageParams>
      headerTitle={"用户表格"}
      actionRef={actionRef}
      rowKey="id"
      search={{
        labelWidth: "auto",
        span: 6,
      }}
      ghost={true}
      toolbar={{
        style: {padding: '0px 0'},
      }}
      toolBarRender={() => [
        <UserEditModel
          isAdd={true}
          key={`add`}
          onSubmit={async (values) => {
            const {data} = await addUser(values)
            if (data) {
              actionRef.current?.reload()
              message.success('添加成功')
            }
            return data
          }}
        />
      ]}
      pagination={{
        pageSize: 10,
      } as any}
      size={"small"}
      request={async (params, sort, filter) => {
        const {data} = await pageUser(params)
        return data
      }}
      columns={columns}
    />
  )
}

export default UserManager;

